<template>
  <div style="height: 100vh;">
    <div class="title">
      <span>知晓</span>
    </div>
    <div class="login">
      <a-form
          id="components-form-demo-normal-login"
          :form="form"
          class="login-form"
          @submit="handleSubmit"
      >
        <a-form-item>
          <a-input
              v-decorator="[
          'userName',
          { rules: [{ required: true, message: '手机号码不对!' }] },
        ]"
              placeholder="请输入手机号码"
          >
            <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)"/>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input
              v-decorator="[
          'password',
          { rules: [{ required: true, message: '密码不对!' }] },
        ]"
              type="password"
              placeholder="请输入密码"
          >
            <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)"/>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-checkbox
              v-decorator="[
          'remember',
          {
            valuePropName: 'checked',
            initialValue: true,
          },
        ]"
          >
            记住我!
          </a-checkbox>
          <a class="login-form-forgot" href="">
            <router-link to="/forgetpassword">忘记密码</router-link>
          </a>
          <a-button type="primary" html-type="submit" class="login-form-button">
            登录
          </a-button>
          Or
          <router-link to="/register">立即注册!</router-link>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script>

// import {Notify} from "vant";

export default {
  data(){
    return{
      payload:{}
    }
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, {name: 'normal_login'});
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values);
          this.payload['username']=values.userName;
          this.payload['password']=values.password;
          this.payload['rememberMe']=values.remember;
          this.$store.dispatch('login',this.payload);
          // Notify({ type: 'success', message: '登陆成功' });
        }
      });
    },
  },
};

</script>

<style scoped lang="less">
//*{
//  padding: 0;
//  margin: 0;
//}

.title {
  height: calc(100vh / 5);
  line-height: calc(100vh / 5);
  text-align: center;

  span {
    font-size: 40px;
    color: cyan;
  }
}

.login {
  height: calc(300vh / 5);
  padding: 20px;

  #components-form-demo-normal-login .login-form {
    max-width: 300px;
  }

  #components-form-demo-normal-login .login-form-forgot {
    float: right;
  }

  #components-form-demo-normal-login .login-form-button {
    width: 100%;
  }

}

</style>